import React, { Component } from 'react';
import * as tools from '../../config/tools'
import * as api from '../../config/api'
import './hospitalinfo.css'
import Popup from '../popup/popup'
import RemarksModal from './RemarksModal'
const $ = window.$;
class Information extends Component {
    constructor(args) {
        super();
        this.state = {
            party : {
                OrderTimeList:[]
            }
        }
    }
    show(Props){
        this.setState({
            party: Props.party
        })
    }
    componentWillReceiveProps(nextProps) {
        this.show(nextProps)
    }
    componentDidMount() {
        this.show(this.props)
    }
    render(){
        let party = this.state.party;
        return(
                <div id="item1mobile" className="mui-slider-item mui-control-content mui-active">
                    <div id="scroll1" className="mui-scroll-wrapper">
                        <div>
                            <img  alt='img' src={require("../../style/images/hos-pic1.jpg")} className="width100" />
                        </div>
                        <div className="hos-txt">
                            <div className="address">
                                <h1>{party.partyName}</h1>
                                <div className="address-txt">{party.partyAddress}
                                    <a id="icon-phone"><span className="mui-icon mui-icon-phone phone"></span></a>
                                </div>
                            </div>
                            <div className="address-content">
                                <h2><span className="add-title"></span>简介</h2>
                                <p>{party.partyMemo}</p>
                                <h2><span className="add-title"></span>预约电话</h2>
                                <p>{party.partyTel}</p>
                                <h2><span className="add-title"></span>预约时间</h2>
                                <p>上午: {party.AMBaginTime} ~ {party.AMEndTime} </p>
                                <p>下午: {party.PMBaginTime} ~ {party.PMEndTime} </p>
                                <h2><span className="add-title"></span>交通</h2>
                                <p>{party.partyTrafficInfo}</p>
                            </div>
                        </div>
                        
                    </div>
                </div>
            )
    }
}
class Appointment extends Component {
    constructor(args) {
        super();
        this.state = {
            party : {
                OrderTimeList:[]
            }
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            party: nextProps.party
        })
    }
    render(){
        return(
            <div className='appointment-text' >
                <p>请留意管理员微信通知，再电话联系医院</p>
                <p>确定体检时间</p>
                <div><a data-reveal-id="popup_modal" className="appointemnt-btn true">预约体检</a></div>
            </div>
            )
    }
}
class TimeList extends Component {
    constructor(args) {
        super();
        this.state = {
            timeList:[]
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            timeList: nextProps.timeList
        })
    }
    choose(chooseItem){
        localStorage.setItem('chooseItem', JSON.stringify(chooseItem));
        $("#popup_modal").reveal("{data-animation:'none'}");
    }
    render(){
        return(
                <div className="width100" id="myTab2_2Content0">
                    <table style={{width:'100%',border:'0'}}>
                        <thead>
                            <tr>
                                <th>时间段</th>
                                <th>剩余名额</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>    
                            {this.state.timeList.map((item,index)=>{
                                return(
                                        <tr key={index}>
                                             <td>{item.schedulingPeriod}</td>
                                             <td>{item.orderPeronCnt}</td>
                                             <td><a onClick={()=>this.choose(item)} className="daiyuyue-btn2 true" >预约</a></td>
                                         </tr>
                                    )
                            })}
                        </tbody>
                    </table>
                </div>
            )
    }
}
class Record extends Component {
    constructor(args) {
        super();
        this.state = {
            tab: 0,
            dateList: [],
            party : {
                OrderTimeList:[]
            }
        }
    }
    show(Props){
        this.setState({
            party: Props.party,
            dateList: Props.party.dateList
        })
    }
    componentWillReceiveProps(nextProps) {
        this.show(nextProps)
    }
    componentDidMount() {
        this.show(this.props)
    }
    render(){
        return(
                 <div id="item2mobile" className="mui-slider-item mui-control-content">
                        <div id="scroll2" className="">
                            <div className="">
                                <ul id="myTab2" className="ls_index">
                                    {this.state.dateList.map((item,index)=>{
                                        let dateArray = item.date.split('-');
                                        let date = `${dateArray[1]}月${dateArray[2]}日`;
                                        return(
                                            <li key={index} className={this.state.tab===index?"active":"normal"} onClick={()=>this.setState({tab:index})} ><span className="ico_none"><p>{date}</p><p>{tools.getDayName(item.dayOfWeek)}</p></span></li>
                                            )
                                    })}
                                </ul>
                                <div className="clear"></div>
                                {this.state.dateList.length > 0 ?(()=>{
                                    switch(this.state.tab){
                                        case 0:return(<TimeList timeList={this.state.party.OrderTimeList[0]} party={this.props.party} day={this.state.dateList[this.state.tab].date} />);
                                        case 1:return(<TimeList timeList={this.state.party.OrderTimeList[1]} party={this.props.party} day={this.state.dateList[this.state.tab].date} />);
                                        case 2:return(<TimeList timeList={this.state.party.OrderTimeList[2]} party={this.props.party} day={this.state.dateList[this.state.tab].date} />);
                                        case 3:return(<TimeList timeList={this.state.party.OrderTimeList[3]} party={this.props.party} day={this.state.dateList[this.state.tab].date} />);
                                        case 4:return(<TimeList timeList={this.state.party.OrderTimeList[4]} party={this.props.party} day={this.state.dateList[this.state.tab].date} />);
                                        default : return(<div></div>)
                                    }
                                })():null}
                            </div>
                        </div>
                    </div>
            )
    }
}
class Hospitalinfo extends Component {
    constructor(args) {
        super();
        this.state = {
            tab : 0,
            party : {},
        }
    }
    show() {
        let params = {
            partyId: this.props.match.params.partyId
        }
        api.selectPartyDetail(params).then((data) => {
            if (tools.checkResult(data)) {
                this.setState({
                    party: data.partyDetailList[0]
                },()=>{
                    $("#remarks_modal").reveal("{data-animation:'none'}");
                })
            } else {
                tools.toast.error('网络错误');
            }
        })
    }
    componentDidMount() {
        this.show();
    }
    render() {
        return (
        <div className='hospitalinfo'>
            <div className='info-slider' >
                <a onClick={()=>this.setState({tab:0})} className={this.state.tab === 0 ?"info-item info-active":"info-item"}>
                    医院信息
                </a>
                <a onClick={()=>this.setState({tab:1})} className={this.state.tab === 1 ?"info-item info-active":"info-item"}>
                    预约体检
                </a>  
            </div>
            <div className="mui-content mui-content-all">
                <div className="mui-slider">                
                    <div className="mui-slider-group">
                        {this.state.tab === 0 ?
                            <Information party={this.state.party} />
                            :
                            this.state.party.isTime === '1'?<Record party={this.state.party} />:<Appointment party={this.state.party} />
                        }
                    </div>
                </div>
             </div>
             <RemarksModal remarks = {this.state.party.remarks} />
             <Popup party={this.state.party} />
       </div>
        );
    }
}

export default Hospitalinfo;